<!doctype html>
<style>
div[contenteditable] {
    font: 20px/25px monospace;
    border: solid 1px green;
    padding: 5px;
}

td {
    padding: 0px;
    vertical-align: top;
    width: 100px;
}

.sim {
    border-spacing: 0px;
    width: 300px;
}
</style>
<div contenteditable id="target" style="width: 300px">
<table class="sim"><tr id="r0"></table>
</div>
<script>
const selection = window.getSelection();
const row = document.getElementById('r0');
const target = document.getElementById('target');
let column;
for (let i = 0; i < 10; ++i) {
  if (i % 4 === 0)
    column = row.appendChild(document.createElement('td'));
  column.innerHTML += `<span id="c${i}">line ${i}<br></span>`;
}
selection.collapse(document.getElementById('c5').firstChild, 3);
</script>
